<template>
	<view class="follow-page">
		<view class="follow-list">
			<view v-for="item in followList" :key="item.id" class="follow-item">
				<merchant-card
					:logo="item.avatar"
					:name="item.name"
					:rating="item.rating"
					:sales="item.products"
					:tags="item.tags"
					:promotions="item.promotions"
					@click="handleItemClick(item)"
				/>
				<view class="follow-actions">
					<button class="unfollow-btn" @click.stop="handleUnfollow(item)">取消关注</button>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadMoreStatus" />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MerchantCard from '@/components/merchant-card/merchant-card.vue'

// 关注列表数据
const followList = ref([
	{
		id: 1,
		name: '商家名称示例1',
		avatar: 'https://via.placeholder.com/100x100',
		rating: 4.8,
		products: 328,
		tags: ['品质保证', '正品直供'],
		promotions: ['满200减20', '新店优惠']
	},
	{
		id: 2,
		name: '商家名称示例2',
		avatar: 'https://via.placeholder.com/100x100',
		rating: 4.6,
		products: 256,
		tags: ['快速发货', '七天无理由'],
		promotions: ['满100减10', '首单立减']
	}
])

// 加载更多状态
const loadMoreStatus = ref('more')
const page = ref(1)
const pageSize = 10

// 下拉刷新
const onPullDownRefresh = async () => {
	try {
		page.value = 1
		// TODO: 调用接口刷新数据
		uni.stopPullDownRefresh()
	} catch (error) {
		console.error('刷新数据失败:', error)
		uni.stopPullDownRefresh()
	}
}

// 上拉加载更多
const onReachBottom = async () => {
	if (loadMoreStatus.value === 'noMore') return
	
	loadMoreStatus.value = 'loading'
	try {
		// TODO: 调用接口加载更多数据
		page.value++
		// 模拟没有更多数据
		if (page.value > 3) {
			loadMoreStatus.value = 'noMore'
		} else {
			loadMoreStatus.value = 'more'
		}
	} catch (error) {
		console.error('加载更多数据失败:', error)
		loadMoreStatus.value = 'more'
	}
}

// 点击关注项
const handleItemClick = (item) => {
	uni.navigateTo({
		url: `/subpackage_merchant/merchant/detail?id=${item.id}`
	})
}

// 取消关注
const handleUnfollow = async (item) => {
	try {
		const [err, res] = await uni.showModal({
			title: '提示',
			content: `确定要取消关注 ${item.name} 吗？`,
			confirmText: '确定',
			cancelText: '取消'
		})
		
		if (!err && res.confirm) {
			// TODO: 调用接口取消关注
			followList.value = followList.value.filter(i => i.id !== item.id)
			uni.showToast({
				title: '已取消关注',
				icon: 'success'
			})
		}
	} catch (error) {
		console.error('取消关注失败:', error)
		uni.showToast({
			title: '操作失败，请重试',
			icon: 'error'
		})
	}
}

// 页面生命周期
onMounted(() => {
	// TODO: 初始化数据
})

// 导出页面事件处理函数
defineExpose({
	onPullDownRefresh,
	onReachBottom
})
</script>

<style lang="scss" scoped>
.follow-page {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding: 10px;
}

.follow-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.follow-item {
	position: relative;
}

.follow-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;

	.unfollow-btn {
		padding: 4px 8px;
		font-size: 12px;
		background-color: #fff;
		color: #ff6a6a;
		border: 1px solid #ff6a6a;
		border-radius: 4px;
		line-height: 1.2;

		&:active {
			background-color: #fff5f5;
		}
	}
}
</style>